<%@ page import="com.niit.service.UserService" %>
<%@ page import="java.util.List" %>
<%@ page import="com.niit.pojo.User" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
    <title>pha-Admin</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/bootstrap-maizi.css"/>
    <link rel="stylesheet" href="css/content-style.css"/>
    <link rel="stylesheet" href="css/mricode.pagination.css"/>
    <link rel="stylesheet" href="css/jquery.fancybox.css"/>
    <link rel="stylesheet" href="css/sweetalert.css"/>
    <style>
        /* 添加行高亮样式 */
        .highlight-row {
            background-color: #ffcccc !important; /* 红色背景 */
            color: #ff0000; /* 红色文字 */
        }
    </style>
</head>
<body>
<!--导航-->
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <!--小屏幕导航按钮和logo-->
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="index.jsp" class="navbar-brand"> pha-Admin</a>
        </div>
        <!--小屏幕导航按钮和logo-->
        <!--导航-->
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="index.jsp"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;后台首页</a>
                </li>
                <li><a href="/user"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;用户管理</a></li>
                <li><a href="/machine"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;设备管理</a></li>

                <li><a href="service.jsp"><span class="glyphicon glyphicon-tasks"></span>&nbsp;&nbsp;服务管理</a></li>
                <li><a href="log.jsp"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;日志管理</a></li>
                <li><a href="wiki.jsp"><span class="glyphicon glyphicon-book"></span>&nbsp;&nbsp;使用文档</a></li>
            </ul>users
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <%
                            String displayName = (String) session.getAttribute("displayName");
                            out.print(displayName != null ? displayName : "admin"); // 显示数据库中的用户名
                        %>
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="dLabel">
                        <li><a href="index.jsp"><span class="glyphicon glyphicon-cog"></span>&nbsp;&nbsp;个人设置</a></li>
                    </ul>
                </li>
                <li><a href="#bbs"><span class="glyphicon glyphicon-off"></span>&nbsp;&nbsp;退出</a></li>
            </ul>
        </div>
        <!--导航-->
    </div>
</nav>
<!--导航-->
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="panel-body" style="padding: 15px 0;">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="user.jsp">用户列表</a></li>
                    <li class=""><a href="user_form.jsp">添加用户</a></li>
                </ul>
            </div>
            <!-- 搜索表单 -->
            <div class="row">
                <form action="user" method="get">
                    <div class="col-md-3 col-lg-offset-9">
                        <div class="input-group">
                            <input class="form-control" type="text"
                                   value="${searchKeyword != null ? searchKeyword : ''}"
                                   placeholder="输入ID、用户名或邮箱搜索" name="keyword">
                            <span class="input-group-btn">
                    <button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-search"></i> 搜索</button>
                </span>
                        </div>
                    </div>
                </form>
            </div>

            <!-- 搜索结果提示 -->
            <c:if test="${searchKeyword != null and not empty searchKeyword}">
                <div class="alert alert-info">
                    搜索结果: " ${searchKeyword} "
                    <c:if test="${empty users}">
                        <span class="text-danger"> - 未找到匹配的用户</span>
                    </c:if>
                </div>
            </c:if>
            <div class="panel panel-default">
                <div class="table-responsive">
                    <%--                    <%--%>
                    <%--                        List<User> users = new UserService().findUsers();--%>
                    <%--                        request.setAttribute("users", users);--%>
                    <%--                    %>--%>
                    <table class="table table-bordered" id="userTable">
                        <thead>
                        <tr>
                            <th class="w8p">id</th>
                            <th class="w18p">用户名</th>
                            <th class="w18p">邮箱</th>
                            <th class="w13p">手机</th>
                            <th class="w10p">角色</th>
                            <th class="w15p">创建时间</th>
                            <th class="w15p">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:choose>
                            <c:when test="${not empty users}">
                                <c:forEach items="${users}" var="user">
                                    <tr data-id="${user.id}" data-status="${user.status}">
                                        <td class="center">${user.id}</td>
                                        <td>${user.userName}</td>
                                        <td>${user.email}</td>
                                        <td>${user.phone}</td>
                                        <td class="center">${user.role}</td>
                                        <td>
                                                ${user.createTime}
                                        </td>

                                        <td class="center">
                                            <!-- 屏蔽按钮 -->
                                            <a name="remove"
                                               data-user-id="${user.id}"
                                               data-status="0"
                                               onclick="handleStatusChange(this, '确认要屏蔽吗？')">
                                                <i class="glyphicon glyphicon-remove"></i>屏蔽
                                            </a>
                                            <!-- 恢复按钮 -->
                                            <a name="regain"
                                               data-user-id="${user.id}"
                                               data-status="1"
                                               onclick="handleStatusChange(this, '确认要恢复吗？')">
                                                <i class="glyphicon glyphicon-ok"></i>恢复
                                            </a>
                                        </td>

                                    </tr>
                                </c:forEach>
                            </c:when>
                            <c:otherwise>
                                <tr>
                                    <td colspan="7" class="text-center">没有数据</td>
                                </tr>
                            </c:otherwise>
                        </c:choose>
                        </tbody>
                    </table>
                </div>
                <div class="panel-footer">
                    <div class="row">
                        <div class="col-md-8 m-pagination" id="paginator">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--footer-->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <p class="text-muted center">
                    Copyright&nbsp;©&nbsp;2017-2018&nbsp;&nbsp;phachon@163.com&nbsp;&nbsp;
                </p>
            </div>
        </div>
    </div>
</footer>
<!--footer-->
<script src="js/plugins/jquery/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins/pagination/mricode.pagination.js"></script>
<script src="js/plugins/fancybox/jquery.fancybox.js"></script>
<script src="js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="js/common/common.js"></script>

<script src="js/module/account.js"></script>
<script type="text/javascript">
    // 页面加载完成后执行

    // 页面加载完成后执行
    $(document).ready(function() {
        // 初始化分页器
        var pageData = [];
        pageData.push({'pageSize': '10', 'total': '1000', 'pageIndex': '2'});
        Common.paginator("#paginator", pageData);
        Account.bindFancyBox();

        // 移除旧的点击事件处理，只使用handleStatusChange函数
    });

    function handleStatusChange(elem, message) {
        // 获取当前按钮、行、用户ID、目标状态
        var $a = $(elem);
        var userId = $a.data('user-id');
        var status = $a.data('status');
        var row = $a.closest('tr'); // 获取当前行

        // 显示确认对话框
        swal({
            title: "确认操作",
            text: message,
            type: "warning",
            showCancelButton: true,
            confirmButtonClass: "btn-danger",
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            closeOnConfirm: false
        }, function(isConfirm) {
            if (isConfirm) {
                // 发送AJAX请求更新状态
                $.ajax({
                    url: "${pageContext.request.contextPath}/user",
                    type: "POST",
                    data: {
                        action: "updateStatus",
                        id: userId,
                        status: status
                    },
                    success: function(response) {
                        if (response === "1") {
                            // 更新成功
                            Common.successAlert("操作成功");

                            // 根据状态更新行显示
                            if (status === 0) {
                                // 屏蔽：移到表格底部并添加高亮
                                row.addClass('highlight-row');
                                $('#userTable tbody').append(row);
                            } else {
                                // 恢复：移回正常位置并移除高亮
                                row.removeClass('highlight-row');

                                // 找到合适的插入位置
                                var normalRows = $('#userTable tbody tr[data-status="1"]');
                                var inserted = false;
                                normalRows.each(function(index, normalRow) {
                                    if ($(normalRow).data('id') > userId) {
                                        $(normalRow).before(row);
                                        inserted = true;
                                        return false;
                                    }
                                });

                                if (!inserted && normalRows.length > 0) {
                                    normalRows.last().after(row);
                                }
                            }

                            // 更新行的状态数据
                            row.data('status', status);

                            // 刷新分页
                            Common.paginator("#paginator", pageData);
                        } else {
                            Common.errorAlert("操作失败");
                        }
                    },
                    error: function() {
                        Common.errorAlert("网络错误，请重试");
                    }
                });
            }
        });
    }
</script>
</body>
</html>
